<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 1012px;
            height: 187px;
            background-color: pink;
        }
        .red1 {
            color: red;
        }
    </style>
</head>

<body>
    <!-- html写这里  -->
    <div>
        <!--  -->
        <div id="app">
            <header1>
                <div slot-scope='props'>
                    <div>{{props.info.temperaturenow}}℃ 空气质量 {{props.info.airquality}} </div>
                </div>
            </header1>
            <ul>
                <li>07月21日</li>
                <li>周三</li>
                <li>农历六月十二</li>
            </ul>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 开始写vue的核心代码 -->
        <script>
            // 外来的组件 实际工作中写在别的页面上
            Vue.component('header1', {
                data() {
                    return {

                     obj:{}

                    }
                },
                // 外来的组件header1 有三个数据  然后自己用了两个  有一个没用  
                template: `
            <div>
                <div class='red1'> {{obj.city}}今天{{obj.weather}}温度 {{obj.temperaturerange}}{{obj.wind}}</div>
                <slot :info='obj'></slot>
				

            </div>
            `,
                created() {
                    console.log('header1 created')
                    axios({
                        url:'http://localhost:5003/httpvue',
                        method:'get'
                    }).then(res=>{
                        console.log(res);
                        this.obj=res.data[0].abj
                    })
                    var res = [{
                        weather: '多云',
                        temperaturenow: 28,
                        city: '上海',
                        airquality:'优',
                        pm25:'27',
                        wind:'东风4-5级',
                        temperaturerange:'27-33',

                    }]
                    this.obj = res[0]
                    // this.weather = res[0].weather
                    // this.temperature = res[0].temperature
                    // this.city = res[0].city
                    // console.log('city', this.city)

                },
                beforeCreate() { console.log('header1 beforeCreate') },              
                beforeMount() { console.log('header1 beforeMount') },
                mounted() { console.log('header1 mounted') },
                beforeUpdate() { console.log('header1 beforeUpdate') },
                updated() { console.log('header1 updated') },
                beforeDestroy() { console.log('header1 beforeDestroy') },
                destroyed() { console.log('header1 destroyed') },
            })







            var vm = new Vue({
                // 传入监管哪个容器
                el: '#app',
                // 这个容器所需要的数据
                data: {
                    msg: '',
                    msg2: '你好世界'
                },
                beforeCreate() { console.log('主页面 beforeCreate') },
                created() {
                    //  axios 请求  http   /weather 
                    // var res = [{
                    //     weather:'晴天',
                    //         temperature:26,
                    //         city:'广州'
                    //    }]
                    console.log('主页面  created')
                },
                beforeMount() { console.log('主页面 beforeMount') },
                mounted() { console.log('主页面 mounted') },
                beforeUpdate() { console.log('主页面 beforeUpdate') },
                updated() { console.log('主页面 updated') },
                beforeDestroy() { console.log('主页面 beforeDestroy') },
                destroyed() { console.log('主页面 destroyed') },
            })
            console.log('vm', vm)
        </script>
</body>

</html>